<template>
  <div id="aside" v-if="isShow">
    <div id="inner">
      <h2>文档</h2>
    <ul>
      <li v-for="(itme, index) in star" :key="index" @click="changeindex(index)"><router-link :class="{isactive: itme.path === $route.path}" :to= itme.path>{{itme.name}}</router-link></li>
    </ul>
    <h2>组件列表</h2>
      <ul>
        <li v-for="(itme, index) in maincont" :key="index" @click="mainchangeindex(index+star.length)"><router-link :class="{isactive: itme.path === $route.path}" :to= itme.path>{{itme.name}}</router-link></li>
        <!-- <li><router-link to="/dialouge">Dialouge 组件</router-link></li>
        <li><router-link to="/switch">Switch 组件</router-link></li>
        <li><router-link to="/input">Input 组件</router-link></li>
        <li><router-link to="/radio">Radio 组件</router-link></li>
        <li><router-link to="/radiogroup">RadioGroup 组件</router-link></li>
        <li><router-link to="/checkbox">Checkbox 组件</router-link></li>
        <li><router-link to="/checkboxgroup">CheckboxGroup 组件</router-link></li> -->
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  name: 'aside',
  data () {
    return {
      isShow: false,
      star: [
        {
          path: '/introduce',
          name: '介绍'
        },
        {
          path: '/install',
          name: '安装'
        },
        {
          path: '/into',
          name: '引入'
        },
        {
          path: '/usuage',
          name: '使用'
        }

      ],
      maincont: [
        {
          path: '/button',
          name: 'Button 组件'
        },
        {
          path: '/dialouge',
          name: 'Dialouge 组件'
        },
        {
          path: '/switch',
          name: 'Switch 组件'
        },
        {
          path: '/input',
          name: 'Input 组件'
        },
        {
          path: '/radio',
          name: 'Radio 组件'
        },
        {
          path: '/radiogroup',
          name: 'RadioGroup 组件'
        },
        {
          path: '/checkbox',
          name: 'Checkbox 组件'
        },
        {
          path: '/checkboxgroup',
          name: 'CheckboxGroup 组件'
        }
      ],
      ischeck: 0
    }
  },
  methods: {
    changeindex (index) {
      console.log(this.$route.path)
      this.ischeck = index
    },
    mainchangeindex (value) {
      this.ischeck = value
    },
    _isMobile () {
      const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag
    }
  },
  created () {
    if (this._isMobile() == null) {
      this.isShow = true
    } else {
      this.isShow = false
    }
  }
}
</script>
<style scoped>
  #aside {
    width: 250px;
    border-right: 1px solid #efefef;
    padding: 20px;
    cursor: pointer;
  }
  #inner {
    width: 100%;
    height: 100%;
  }
  #inner > ul > li {
    list-style: none;
    margin: 10px 0;
  }
  #inner > ul > li > a {
    text-decoration: none;
    color: #4a5c6b;
    font-size: 20px;
  }
  #inner > ul > li > a.isactive {
    color: blue;
  }
</style>
